<template>
  <div class="header">
      <img class="logo" src="../assets/images/icon1.png">
      <span>NSEVIS</span>
      </div>
  <div class="container">
    <div class="top-section">
      <div class="control-panel">
          <div class="component-title">Control Panel</div>
          <ControlPanel></ControlPanel>
      </div>
      <div class="scatter-plot">
        <div class="component-title">Scatter Plot</div>
        <Scatterplot></Scatterplot>
      </div>
      <div class="right-view">
        <div class="component-title">RightView</div>
        <RightView></RightView>
      </div>
    </div>
    <div class="bottom-section">
      <div class="statistic">
        <div class="component-title">Radar</div>
        <Statistic></Statistic>
      </div>
      <div class="Subgraph">
        <div class="component-title">Subgraph</div>
        <Subgraph></Subgraph>
      </div>
      <div class="link-prediction">
        <div class="component-title">Link Prediction</div>
        <Prediction></Prediction>
        <div class="feature-matrix">
          <FeatureMatrix></FeatureMatrix>
        </div>
        <!-- <div class="prediction">
          <Prediction></Prediction>
        </div> -->
    </div>
    </div>
  </div>
</template>


<script setup>
import { ref, onMounted } from "vue";
import ControlPanel from "./ControlPanel.vue"
import Statistic from "./Statistic.vue";
import Scatterplot from "./ScatterPlot.vue"
import FeatureMatrix from './FeatureMatrix.vue'
// import Prediction from './Prediction.vue'
import Subgraph from "./Subgraph.vue";
import Prediction from "./Prediction.vue";
import RightView from "./RightView.vue";

  const foodProductionLocations = ref("");
  const addCategories = ref("");
  const foodCategories = ref("");
  const foodRiskLevels = ref("");

  function updateScatterPlot() {
    // Update scatter plot logic goes here
  }

  onMounted(() => {
    // Initialize the component when mounted
    console.log("我进来了");
  });

</script>


<style scoped>
.container {
  display: grid;
  grid-template-rows: 1fr auto; /* 顶部区域和底部区域 */
}

.top-section {
  display: grid;
  grid-template-columns: 1fr 4fr 2fr; /* Control Panel 和 Scatter Plot */
  gap: 0; /* 视图之间的间隔 */
  padding: 0;
  height: 50vh; /* 视窗高度 */
  width: 80vw;
}

.control-panel,
.scatter-plot,
.right-view {
  border: 2px solid #ccc; /* 视图边框 */
  padding: 0;
  overflow: hidden; /* 防止内容溢出 */
  border-radius: 8px; /* 添加圆角 */
}

.bottom-section {
  display: grid;
  grid-template-columns: 2fr 3fr 2fr; /* 三列等宽 */
  gap: 0; /* 视图之间的间隔 */
  padding: 0;
  height: 50vh; /* 视窗高度 */
  width: 80vw;
}

.statistic,
.Subgraph,
.link-prediction {
  border: 2px solid #ccc; /* 视图边框 */
  padding: 0;
  overflow: hidden; /* 防止内容溢出 */
  border-radius: 8px; /* 添加圆角 */
}
.header {
  display: flex;
  background-color: #4e7282;
  border-radius: 8px;
  color: white;
  padding: 0;
  margin: 0;
  height: 4vh;
  width: 80vw;
  align-items: center;
}
.logo{
  width: 3vh;
  height: 3vh;
  margin-right: 1vh;
  margin-left: 2vh;
}
.component-title {
  background-color: #bbbfc4;
  color:  #2c3e50;
  font-weight: bold;
  padding: 1px;
  text-align: left;
  margin: 0;
  border-bottom: 3px solid #ccc;
  flex-direction: column;
}
/* Adjust the styles for form elements as needed */
</style>